<template>
  <h1>app组件</h1>
  名字：<input type="text" v-model="nameValue">  年龄：<input type="text" v-model.number="ageValue">
  <button @click="addUser">注册用户</button>

  <ul>
    <li v-for="item in list" :key="item.id">
      <input type="checkbox">
      <span>{{ item.name }} --- {{ item.age }}</span>
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            id: 1,
            name: '张三',
            age: 18
          }
        ],
        nameValue: '',
        ageValue: '',
      }
    },
    methods: {
      addUser () {
        //组装一个对象
        const userInfo = {
          name: this.nameValue,
          age: this.ageValue,
          id: this.list[this.list.length - 1].id + 1
        }
        //添加到list中
        this.list.unshift(userInfo)
        //清空输入框文本
        this.nameValue = ''
        this.ageValue = ''
      }
    }
  }
</script>